<template>
  <div class="dt-login">
    <div class="dt-login-logo">
      <img src="/skb/img/login_logo.png" alt="" />
    </div>
    <div class="dt-login-area">
      <div class="dt-login-content-left">
        <a href="https://www.ccccdt.com/appDown" target="_blank" class="dt-login-content-down">立即下载App</a>
      </div>
      <div class="dt-login-content">
        <div class="dt-login-content-title">欢迎登录</div>
        <div class="dt-login-content-ewm">
          <img :src="ewmSrc" alt="" :class="loginState != 0 ? 'dt-ewmSrcExpired' : ''" />
          <div class="dt-login-content-suc" v-if="loginState == 2">
            <p>登录成功</p>
            <!-- <p>请在手机上面确认登录</p> -->
            <p>
              <img src="/skb/img/bu_sm-suc.png" alt="" />
            </p>
          </div>
          <div class="dt-login-content-error" v-if="loginState == 1 || loginState == 3">
            <p v-if="loginState == 1">登录失败</p>
            <p v-if="loginState == 3">二维码失效</p>
            <el-button type="primary" class="wk-login-ewm-refresh" @click="refreshEwm">点击刷新</el-button>
          </div>
        </div>
        <div class="dt-login-content-tips">请使用数科帮App扫码登录</div>
      </div>
    </div>
    <div class="dt-login-footer">COPYRIGHT©2023-2024 CCCCDT.COM中交数科平台版权所有</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ip: this.$cookies.get('ip') || '',
      pollingTimer: null,
      ewmTimer: null,
      loginState: 0
    }
  },

  methods: {
    refreshEwm() {
      if (this.ewmTimer) {
        clearTimeout(this.ewmTimer)
      }
      if (this.pollingTimer) {
        clearInterval(this.pollingTimer)
      }
      this.web_token = this.$tools.getWebToken()
      var data = [{ web_token: this.web_token }],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/LoginCodeCreate'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.ewmSrc = data.message
              this.loginState = 0
              this.timing()
              this.pollingLogin()
            }
          })
        })
        .catch((error) => { })
    },
    timing() {
      this.ewmTimer = setTimeout(() => {
        this.loginState = 3
        clearTimeout(this.ewmTimer)
        clearInterval(this.pollingTimer)
      }, 300000)
    },
    pollingLogin() {
      this.pollingTimer = setInterval(this.pollingLoginCheck, 5000)
    },
    pollingLoginCheck() {
      var data = [
        {
          web_token: this.web_token,
          ip: this.ip
        }
      ],
        domain = [this.$store.state.USER_DOMAIN],
        path = ['/phoneapi/Web_Login_Check_QRCode'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              var uid = data.data.id + '',
                uphone = data.data.safe_phone,
                guid = data.data.guid,
                uname = data.data.ccshcc_user_name
              // permission = data.data.admin_group.is_super === 1 ? 'isAdmin' : result.data.admin_group.permission_list.join()

              this.loginState = 2

              // 设置服务器cookie  仅uid

              if (process.env.NODE_ENV == 'development') this.$cookies.set('uid', this.$tools.getEncrypt(uid), { path: '/', maxAge: 60 * 60 * 24 })
              else
                this.$cookies.set('uid', this.$tools.getEncrypt(uid), {
                  //domain: '.ccccdt.com',
                  path: '/',
                  maxAge: 60 * 60 * 24
                })
              this.$cookies.set('uphone', uphone, {
                path: '/',
                maxAge: 60 * 60 * 24
              })
              this.$cookies.set('guid', guid, {
                path: '/',
                maxAge: 60 * 60 * 24
              })
              this.$cookies.set('uname', uname, {
                path: '/',
                maxAge: 60 * 60 * 24
              })

              //设置store
              this.$store.commit('setUid', this.$tools.getEncrypt(uid))
              this.$store.commit('setUphone', uphone)
              this.$store.commit('setGuid', guid)
              this.$store.commit('setUname', uname)

              if (this.pollingTimer) {
                clearInterval(this.pollingTimer)
              }
              if (this.ewmTimer) {
                clearTimeout(this.ewmTimer)
              }
              this.getUserInfo(uid)
              this.$router.push('/main/#/pm?tab=list&elTab=0')
            } else if (data.code === 400) {
            } else {
              if (this.pollingTimer) {
                clearInterval(this.pollingTimer)
              }
              if (this.ewmTimer) {
                clearTimeout(this.ewmTimer)
              }
              this.loginState = 1
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '1000',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    },
    getIp() {
      fetch('https://api.ipify.org/?format=json')
        .then((response) => {
          if (response.ok) {
            return response.json()
          }
          throw new Error('Network response was not ok.')
        })
        .then((data) => {
          this.ip = data.ip
          this.$cookies.set('ip', data.ip, {
            path: '/',
            maxAge: 60 * 60 * 24
          })
        })
        .catch(() => { })
    },
    getUserInfo(user_id) {
      var data = [
        {
          user_id: user_id,
          ip: this.ip,
          login_type: 1
        }
      ],
        domain = [this.$store.state.DOMAIN],
        path = ['/chat/user/user_info'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: '1000',
                onClose: () => { }
              })
            }
          })
        })
        .catch((error) => { })
    }
  },
  asyncData(context) {
    var web_token = context.$tools.getWebToken()
    var data = [{ web_token: web_token }],
      domain = [context.store.state.USER_DOMAIN],
      path = ['/phoneapi/LoginCodeCreate'],
      dataAxios = context.$tools.getDataAxios(context, domain, path, data)
    return Promise.all(dataAxios)
      .then((response) => {
        return context.$tools.callbackAxios(context, response, (response) => {
          var data = response[0].data,
            returnData = {}
          if (data.code === 200) {
            // console.log(data)
            returnData.ewmSrc = data.message
            returnData.web_token = web_token
          }
          return returnData
        })
      })
      .catch((error) => { })
  },
  fetch() {
    if (!window.electron) {
      console.log('请在electron环境下运行')
      this.$setTitle('数科帮网页版')
    }
  },
  mounted() {
    if (!this.ip) {
      this.getIp()
    }
    this.pollingLogin()
    this.timing()
  }
}
</script>
<style scoped>
.dt-login {
  position: fixed;
  /* 使用固定定位 */
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度设置为100% */
  height: 100%;
  /* 高度设置为100% */
  background-image: url('/skb/img/bg_login.png');
  z-index: 1000;
  /* 设置z-index，确保div覆盖其他内容 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-size: cover;
}

.dt-login-logo {
  margin-bottom: 50px;
  margin-top: -130px;
}

.dt-login-content {
  width: 440px;
  height: 484px;
  border-radius: 0px 10px 10px 0px;
  background-color: #f4f7ff;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.dt-login-content-title {
  font-size: 20px;
  color: #1f1f1f;
  font-weight: bold;
  margin: 80px 0 40px 0;
}

.dt-login-content-ewm {
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  padding: 10px;
  box-sizing: border-box;
  position: relative;
}

.dt-login-content-ewm>img {
  width: 100%;
}

.dt-login-content-tips {
  text-align: center;
  font-size: 14px;
  color: #606266;
  margin-top: 40px;
}

.dt-login-footer {
  position: fixed;
  bottom: 60px;
  font-size: 12px;
  color: #909399;
}

.dt-login-content-suc {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  text-align: center;
  /* left: -10px; */
}

.dt-login-content-suc p:nth-of-type(1) {
  margin-bottom: 6px;
  font-size: 16px;
  color: #1f1f1f;
}

.dt-login-content-suc p:nth-of-type(2) {
  margin-bottom: 20px;
  font-size: 14px;
  color: #1f1f1f;
}

.dt-ewmSrcExpired {
  opacity: 0.1;
  width: 100%;
}

.dt-login-content-error {
  position: absolute;
  top: 70px;
  width: 100%;
  left: 0;
  text-align: center;
}

.dt-login-content-error p:nth-of-type(1) {
  margin-bottom: 12px;
  font-size: 16px;
  color: #1f1f1f;
}

.dt-login-area {
  display: flex;
}

.dt-login-content-left {
  width: 570px;
  height: 484px;
  background-image: url('/skb/img/login_card-left.png');
}

.dt-login-content-down {
  display: inline-block;
  width: 160px;
  height: 56px;
  line-height: 56px;
  border-radius: 28px;
  font-size: 18px;
  color: #ffffff;
  background-color: #2f54eb;
  text-align: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  margin-top: 322px;
  margin-left: 80px;
}

.dt-login-content-down:hover {
  background-color: #597ef7;
}
</style>
